<template>
  <div class="password-change">
    <!-- User info section -->
    <div class="user-info">
      <div class="avatar-section">
        <div class="avatar" v-if="avatarPath">
          <img :src="avatarPath" alt="" />
        </div>
        <div v-else class="default-img">{{ studentName }}</div>
      </div>
      <div class="right-section">
        <div class="name">
          <span>{{ studentName }}</span>
          <img :src="gender === '男' ? nanIcon : nvIcon" class="gender" alt="" />
        </div>
        <div class="student-no">学号: {{ studentNo }}</div>
      </div>
    </div>

    <!-- Password change form -->
    <van-form @submit="onSubmit" class="password-form">
      <van-cell-group>
        <van-field
          v-model="form.currentPassword"
          type="password"
          name="currentPassword"
          label="当前密码"
          placeholder="请输入当前密码"
          :rules="[{ required: true, message: '请输入当前密码' }]"
        />
        <van-field
          v-model="form.newPassword"
          type="password"
          name="newPassword"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
          v-model="form.confirmPassword"
          type="password"
          name="confirmPassword"
          label="确认新密码"
          placeholder="请再次输入新密码"
          :rules="[{ required: true, message: '请确认新密码' }]"
        />
      </van-cell-group>

      <div class="submit-button">
        <van-button block type="primary" native-type="submit" class="submit-btn">
          确认修改
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import nanIcon from '@/assets/img/nan.png'
import nvIcon from '@/assets/img/nv.png'
import { ref } from 'vue'
import useUserStore from '@/stores/user'
import { showToast } from 'vant'
import { aesEncrypt } from '@/utils/tools'
import { studentLoginResetPwdRequest } from '@/api/student'

const userStore = useUserStore()
const userInfo = userStore.userInfo
const avatarPath = userInfo ? userInfo.avatarPath : ''
const studentName = userInfo ? userInfo.studentName : ''
const studentNo = userInfo ? userInfo.studentNo : ''
const gender = userInfo ? userInfo.gender : ''

const form = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
})

const onSubmit = async () => {
  if (form.value.newPassword !== form.value.confirmPassword) {
    showToast('两次输入的新密码不一致')
    return
  }
  const params = {
    oldPassword: aesEncrypt(form.value.currentPassword),
    newPassword: aesEncrypt(form.value.newPassword),
    confirmPassword: aesEncrypt(form.value.confirmPassword),
  }
  const submitRes = await studentLoginResetPwdRequest(params)
  // console.log('submitRes', submitRes)
  if (submitRes.code == 200) {
    showSuccessToast('提交成功！')
  }
}
</script>

<style scoped>
.password-change {
  padding: 20px;
}

.user-info {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-bottom: 30px;
}

.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.right-section {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.default-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d9d9;
  margin-bottom: 15px;
}
.name {
  font-size: 14px;
  font-weight: bold;
}

.student-no {
  font-size: 12.254px;
  color: #666;
}
.gender {
  width: 12px;
  margin-left: 3px;
}
.password-form {
  margin-top: 20px;
}

.submit-button {
  margin: 30px 16px 0;
}

.submit-btn {
  margin-top: 16px;
}
.avatar-section {
  font-size: 23px;
}
</style>
